<template>
	<div class="commends">
		 <div class="title">
		 	周末去哪
		 </div>
		 <ul v-for="item of weekendList" :key="item.id">
		 	<li class="item-commend">
		 		<div class="wrapper">
		 			<img class="item-img" :src="item.imgSrc"/>
		 		</div>
		  	<div class="commend-info">
			  	<p class="commend-title">{{item.title}}</p>
			  	<p class="item-commend-info">{{item.info}}</p>
		  	</div>
		 	</li>
		 </ul>
	</div>
</template>

<script>
export default{
	name: 'homeWeekends',
	props:{
		weekendList:Array
	}
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl";
	.title
	  height:.8rem
	  line-height:.8rem
	  text-indent:.2rem
	  margin:.1rem 0
	  background:#eee
	.wrapper
		overflow:hidden
		height:0
		padding-bottom:33.9%
		.item-img
			position:relative
			width:100%
	.commend-info
		padding:.1rem
		min-width:0
		.commend-title
			  font-weight:border
			  font-size:.32rem
			  line-height:.54rem
			  ellipsis()
		.item-commend-info
			 line-height:.4rem
			 font-size:.26rem
			 color:#ccc
			 ellipsis()
			
	
</style>